<template>
	<header class="title">
		<ul>
			<li></li>
			<li>{{title}}</li>
			<li><span v-if="title=='Profile'">{{likecount}}</span></li>
		</ul>
	</header>
</template>
<script>
export default{
	data(){
		return{
			like:this.$store.state.like,
		}
	},
	props:{
		title:{
			type:String,
			require:false,
			default:()=>{
				return 'Favorites'
			}
		}
	},
	computed:{
		likecount(){
			if(this.like>1000){
				return parseInt(this.like)/1000+'k';
			}
			return this.like;
		}
	}
}
</script>
<style lang="scss">
header.title{
	height:2.133333rem;
	line-height:2.133333rem;
	background-color:#fff;
	>ul{
		display:flex;
		align-items:center;
		justify-content:space-between;
		list-style:none;
		>li{
			flex:1;
			text-align:center;
			&:nth-child(2){
				font-weight:bold;
				font-size:0.906667rem;
			}
			&:nth-child(3){
				font-size:0.8rem;
				color:#363636;
				>span{
					display:flex;
					justify-content:flex-end;
					margin-right:1.066667rem;
					align-items:center;
					&:after{
						content:'';
						display:inline-block;
						width:0.986667rem;
						height:0.853333rem;
						background:url('../../assets/images/diamondcopy@2x.png') no-repeat;
						background-size:cover;
						margin-left:0.266667rem;
					}
				}
			}
		}
	}
}
</style>